<template>
  <div class="complex-widget-form">
    <div class="complex-widget-form__left">
      <TabVessel ref="tabVessel"
                 :options="options"
                 v-model="form.selectedWidgetPane"
                 @tab-click="handleChange">

        <template v-slot:publishedreportContent
                  v-if="form.selectedWidgetPane === 'publishedreport'">

          <div class="published-widget h-full">
            <reportList ref="reportList"
                        :isLoadingDone.sync="isLoadingDone"
                        :isReportAdd="true"
                        :device="device"
                        @getSelectData="getSelectData"
                        :parentRecordFilterType="'Custom'"></reportList>

            <el-button class="published-widget--add"
                       v-if="isLoadingDone"
                       type="primary"
                       @click="handleAdd"
                       size="small">{{$t('add')}}</el-button>
          </div>
        </template>
      </TabVessel>
    </div>

  </div>
</template>

<script>
import TabVessel from '@/components/tab-vessel'
import reportList from '@/views/modules/mspbots/reports/list-report.vue'
import EmitterMixin from '@/mixins/emitter'
import ComplexWidgetForm from './complex-widget-form'

export default {
  name: 'ComplexWidgetForm',
  provide () {
    return {
      addWidgetSearchForm: this.form
    }
  },
  props: ['device'],
  mixins: [EmitterMixin],

  components: {
    TabVessel,
    ComplexWidgetForm,
    reportList
  },

  data () {
    return {
      form: {
        selectedWidgetPane: 'publishedreport',
        name: ''
      },
      options: [
        {
          label: 'Dashboards',
          value: 'publishedreport'
        }
      ],
      isLoadingDone: false,
      selectedPublishedWidgets: []
    }
  },
  methods: {

    handleChange (e) {
      if (this.$refs.report) this.$refs.report.clearSelectData()
      this.form.name = ''
    },
    getSelectData (arr) {
      this.selectedPublishedWidgets = arr
    },
    async handleAdd () {
      if (this.selectedPublishedWidgets.length === 0) {
        return this.$message.error(this.$t('custom.widget.selectdashboard'))
      }
      this.$root.eventBus.$emit('reportSelectedList', this.selectedPublishedWidgets)
      this.$root.eventBus.$emit('closeDialog')
      this.$emit('add', this.selectedPublishedWidgets)
    }
  }
}
</script>
<style lang="scss" scoped>
.published-widget {
  height: calc(90vh - 180px);
  &--add {
    float: right;
  }
}
</style>
